<template>
    <div>
      <!--    面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      </el-breadcrumb>
      <!--    卡片视图区域-->
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="3" style="border:1px solid #eaedf1;box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important">
            <p style="font-weight: bolder">店铺推荐</p>
            <!--  侧边栏-->
            <el-popover
              placement="right"
              title="标题"
              width="200px"
              trigger="hover"
              content="11111111111">
              <p slot="reference" style="cursor:pointer">hover 激活</p>
            </el-popover>
            <el-popover
              ref="popover"
              placement="right"
              title="标题"
              height="300px"
              width="200"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
            </el-popover>
            <p v-popover:popover style="cursor:pointer">focus 激活</p>
          </el-col>
          <el-col :span="12">
            <div class="block" style="width:100%">
              <el-carousel height="300px">
                <el-carousel-item v-for="item in datas" :key="item">
                  <img :src="item" style="width: 100%">
                  {{item}}
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
</template>
<script>
export default {
  data () {
    return {
      a: 0,
      datas: [require('../assets/img/1.png'), require('../assets/img/2.png'), require('../assets/img/3.png'), require('../assets/img/4.png')]
    }
  }
}
</script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  /*.el-carousel__item:nth-child(2n) {*/
  /*  background-color: #99a9bf;*/
  /*}*/

  /*.el-carousel__item:nth-child(2n+1) {*/
  /*  background-color: #d3dce6;*/
  /*}*/
</style>
